<template>
  <div>
    <div v-if="selectIndex == null">
        <van-nav-bar title="配置核对智能app" />
        <div class="biz">
          <van-button v-for="(item, index) in bizItems" type="primary" class="biz-item" @click="selectIndex = index">{{ item.bizName }}</van-button>
        </div>
    </div>
    <div v-else>
        <van-nav-bar
  :title="bizItems[selectIndex].bizName"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
        <div>
            <van-cell-group inset>
                <van-field v-for="(qs, qsIndex) in bizItems[selectIndex].form" :error="isError(qs.answer, formData[qsIndex])" v-model="formData[qsIndex]" :label="qs.name" :placeholder="qs.placeholder" />
            </van-cell-group>
        </div>
    </div>
  </div>
</template>

<script>
import questionConfig from './form-config'
export default {
  data() {
    return {
      selectIndex: null,
      bizItems: questionConfig,
      formData: {}
    };
  },
  methods: {
    onClickLeft() {
        this.formData = {}
        this.selectIndex = null
    },
    isError(answer, text) {
        if(text === null || text === undefined || text.trim() === '') {
            return false
        }
        if(text.trim() === answer) {
            return false
        }
        return true
    }
  }
};
</script>

<style>
.biz {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.biz-item {
  width: 170px;
  margin: 10px;
}
</style>
